<template>
	<view class="head">
		<image class="img" src="/static/activityList/left.png" mode=""></image>
		<view class="inputs">
			<!-- <image src="@/static/screen/search.png" mode=""></image> -->
			<input type="text" placeholder="请输入学院名称">
		</view>
	</view>
	<view class="content">
		<view class="list" v-for="(item, index) in list" key="item.id">
			<view class="item">
				{{item.name}}
			</view>
			<view class="item" v-for="(i, ind) in item.list" key="index">
				{{i.name}}
			</view>
			<view class="background"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const list = ref([{
		name: 'A',
		id: '1',
		list: [{
			name: 'A学院'
		}, {
			name: 'A学院'
		}, {
			name: 'A学院'
		}, {
			name: 'A学院'
		}, {
			name: 'A学院'
		}]
	}, {
		name: 'B',
		id: '1',
		list: [{
			name: 'B学院'
		}, {
			name: 'B学院'
		}, {
			name: 'B学院'
		}, {
			name: 'B学院'
		}, {
			name: 'B学院'
		}]
	}])
</script>

<style lang="scss">
	.head {
		width: 100vw;
		height: 88rpx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		padding-right: 32rpx;
		box-sizing: border-box;
		font-size: 36rpx;
		color: #353535;
		background: #fff;
		z-index: 111;

		.img {
			width: 48rpx;
			height: 48rpx;
		}

		.inputs {
			width: 606rpx;
			height: 64rpx;
			display: flex;
			align-items: center;
			background: #F1F1F1;
			border-radius: 32rpx;
			margin-left: 40rpx;
			padding: 0 20rpx;
			box-sizing: border-box;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 20rpx;
			}

			input {
				flex: 1
			}
		}
	}

	.content {
		padding: 88rpx 34rpx;
		box-sizing: border-box;

		.item {
			height: 90rpx;
			border-bottom: 2rpx solid #F6F6F6;
			line-height: 90rpx;
			font-size: 28rpx;
		}

		.background {
			width: 100vw;
			height: 20rpx;
			background: #F6F6F6;
			margin-left: -34rpx;
		}
	}
</style>